<template>
	<view class="container" style="margin-top: 30rpx;">

		<u-collapse @change="change" @close="close" @open="open">

			<u-collapse-item v-for="(item,index) in airList" :border="false" :key="index" :title="item.title">
				<view v-for="(t,i) in item.details" :key="i">
					<text class="u-collapse-content">{{t}}</text>
				</view>
			</u-collapse-item>

		</u-collapse>

	</view>
</template>

<script>
	import {rulList} from '@/api/airport.js'
	export default {
		props:{
			type:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				airList: []
			}
		},
		onLoad() {

		},
		methods: {
			async getrulList(){
				let res = await rulList({type:this.type})
				this.airList = res.data.rulList
			},
			open(e) {
				// console.log('open', e)
			},
			close(e) {
				// console.log('close', e)
			},
			change(e) {
				// console.log('change', e)
			}
		}
	}
</script>



<style lang="scss" scoped>
	// 头部样式
	::v-deep .u-cell__head {
		background-color: rgba(30, 41, 59, 0.8) !important;
		color: #e2e8f0 !important;
	}

	::v-deep .u-cell__body:hover {
		background-color: rgba(30, 41, 59, 0.8) !important;
		color: #e2e8f0 !important;
	}

	// 标题样式
	::v-deep .u-cell__title-text {
		color: #e2e8f0 !important;
		font-weight: 600 !important;

		// Hover 和 Active 状态下文字颜色的变化
		.u-collapse-item:hover &,
		.u-collapse-item:active & {
			color: #ffffff !important;
		}
	}

	// 折叠面板内容文本样式
	::v-deep .u-collapse-item__content__text {
		color: #cbd5e1 !important;
		background-color: rgba(15, 23, 42, 0.9) !important;
		font-size: 28rpx !important;
		padding: 30rpx 40rpx !important;
	}

	// 定义折叠项标题容器的样式，包括悬停和点击效果
	::v-deep .u-collapse-item__title {
		background-color: rgba(30, 41, 59, 0.6) !important;
		color: #e2e8f0 !important;
		font-weight: 600 !important;
		font-size: 32rpx !important;
		padding: 30rpx 40rpx !important;
		border-bottom: 1rpx solid rgba(75, 85, 99, 0.3) !important;
		transition: background-color 0.3s ease, color 0.3s ease !important;

		// 悬停状态下的样式变化
		&:hover {
			background-color: rgba(51, 65, 85, 0.7) !important;
			color: #ffffff !important;
		}

		// 点击激活状态下的样式变化
		&:active {
			background-color: rgba(59, 73, 95, 0.8) !important;
			color: #ffffff !important;
		}

		// 额外添加点击状态的样式变化
		&.active {
			background-color: rgba(59, 73, 95, 0.8) !important;
			color: #ffffff !important;
		}
	}

	/* ========== 右侧箭头图标 hover 联动变色 ========== */

	// 箭头图标的默认样式
	::v-deep .u-cell__right-icon {
		color: #94a3b8 !important;
		width: 36rpx !important;
		height: 36rpx !important;
		transition: color 0.3s ease !important;
	}

	// 当标题 hover 或 active 时，箭头也变亮
	::v-deep .u-collapse-item__title:hover .u-cell__right-icon,
	::v-deep .u-collapse-item__title:active .u-cell__right-icon,
	::v-deep .u-collapse-item__title.active .u-cell__right-icon {
		color: #38bdf8 !important;
	}

	// 展开状态（箭头向上）+ hover 时更亮眼
	::v-deep .u-cell__right-icon[style*="transform: rotate(180deg)"] {
		color: #38bdf8 !important;
	}

	::v-deep .u-collapse-item__title:hover .u-cell__right-icon[style*="transform: rotate(180deg)"],
	::v-deep .u-collapse-item__title:active .u-cell__right-icon[style*="transform: rotate(180deg)"],
	::v-deep .u-collapse-item__title.active .u-cell__right-icon[style*="transform: rotate(180deg)"] {
		color: #7dd3fc !important;
	}
</style>